<template>
	<view class="page">
		<view class="herder ">
			<span class="span1">盘点地点</span>
			<span>{{address}}</span>
		</view>
		<view class="tabTitle">
			物资信息
		</view>
		<!-- @click.stop="jumpTo('/pages/InventoryCounting/Ledger',{
			id:v.id
		})" -->
		<view class="box" v-for="(v,i) in list" :key="i">
			<view class="item flex">
				<view class="item_label">
					资产编码
				</view>
				<view class="item_value">
					{{v.assetNumber}}
				</view>
			</view>
			<view class="item flex">
				<view class="item_label">
					设备位号
				</view>
				<view class="item_value">
					{{v.deviceCode}}
				</view>
			</view>
			<view class="item flex">
				<view class="item_label">
					设备名称
				</view>
				<view class="item_value">
					{{v.deviceName}}
				</view>
			</view>
			<view class="item flex">
				<view class="item_label">
					规格型号
				</view>
				<view class="item_value">
					{{v.deviceModel}}
				</view>
			</view>
			<view class="item flex">
				<view class="item_label">
					账面数量
				</view>
				<view class="item_value">
					{{v.amount}}
				</view>
			</view>

			<view class="item flex align-items">
				<view class="item_label">
					实盘数量
				</view>
				<view class="item_value flex align-items">
					<input  class="inputs" type="number" placeholder=""
						placeholder-style="font-size:26rpx" v-model="v.inventoryAmount" />
					<view class="btns" @click.stop="startScan(i)">扫码</view>
				</view>
			</view>
			<!-- 	<view class="item flex">
				<view class="item_label">
					单位
				</view>
				<view class="item_value">
					{{v.unitstr}}
				</view>
			</view> -->
			<view class="item flex align-items">
				<view class="item_label">
					原因
				</view>
				<view class="item_value" style="flex: 1;">
					<input class="inputs" v-model="v.reason" placeholder="" placeholder-style="font-size:26rpx" />
				</view>
			</view>
			<view class="item flex ">
				<view class="item_label " :class="{
					types:info.configureType == 1
				}">
					拍照
				</view>
				<view class="item_value" style="flex: 1;">
					<view class="uploadlist">
						<block v-if="v.fileList.length>0">
							<view class="uploadlist_item" v-for="(vd , ixd) in v.fileList" :key="ixd">
								<image :src="vd.url" mode="aspectFill" class="uploadlist_item_image"
									@click.stop="previewImage(vd.url)"></image>
								<image src="/static/delete.png" class="uploadlist_delet" @click.stop="deltet(i,v)">
								</image>
							</view>
						</block>
						<view class="uploadlist_add" @click.stop="uplaodImg(i)" v-if="v.fileList.length<=0">
							<u-icon name="plus" size="30" color="#E6E6E6"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn flex justify-content-around">
			<view class="btn_left" @click="back">返回</view>
			<view class="btn_right" @click="submit()"> 保存</view>
		</view>
		<helangcompress ref="helangCompress"></helangcompress>
	</view>
</template>

<script>
	import helangcompress from '@/components/helang-compress/helang-compress1.vue'
	import {
		getRecordByPartitionId,
		inventoryGetInfo,
		inventoryList,
		submitRecord,
		getDataByDeviceCode
	} from '@/api/Inventory.js'
	import urlConfig from "@/request/urlConfig.js"; // 引入接口地址配置
	export default {
		components: {
			helangcompress
		},
		data() {
			return {
				fileList: [],
				list: [],
				info: {},
				address: '',
				idx: '',
				typeMapping: {
					1: '盘点时必须上传设备照片',
					2: '必须扫描盘点',
				},
			}
		},
		async onLoad(option) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			this.address = option.address
			await this.getList({
				partitionId: option.partitionId,
				inventoryId: option.inventoryId
			})
			await this.getInfo(option.inventoryId)
			uni.hideLoading()
		},
		methods: {
			// 保存 jumpTo('/pages/InventoryCounting/Ledger')
			submit() {
				const containsTarget = this.checkIfContains(this.info.configureType || '');
				const hasEmptyFileList = this.list.find(item => item.inventoryAmount && containsTarget && item.fileList
					.length <= 0);
				if (hasEmptyFileList) {
					return uni.$u.toast('当前图片为必填');
				}
				let list = this.list.filter(v => v.inventoryAmount)
				if (list.length <= 0) return uni.$u.toast('请填写盘点值')
				const arr = list.map(v => {
					return {
						id: v.id,
						inventoryAmount: v.inventoryAmount || '',
						fileUrl: v.fileList.length > 0 ? v.fileList[0].urlTwo : '',
						reason: v.reason || ''
					}
				})
				submitRecord(arr).then(res => {
					console.log(res, "res");
					uni.$u.toast('操作成功')
					uni.navigateBack()
				})
			},
			back() {
				uni.navigateBack()
			},
			async getList(params) {
				const res = await getRecordByPartitionId(params)
				console.log(res, "res");
				res.datas.forEach(v => {
					v.fileList = []
					v.inventoryAmount = v.state == 1 ? v.inventoryAmount : null
				})
				res.datas.forEach(v => {
					v.fileList = v.fileUrl ? v.fileUrl.split(',').map(v => {
						return {
							url: urlConfig.nearbyUrl + v,
							urlTwo: v
						}
					}) : []
				})
				console.log(res.datas, "datas");

				this.list = res.datas
			},
			async getInfo(id) {
				const res = await inventoryGetInfo({
					id,
				})
				this.info = res.datas
				console.log(res, "getInfo");
			},
			checkIfContains(value) {
				const mainString = this.info.configureType || ''
				// const mainString = '1'
				return mainString.includes(value);
			},
			// 处理图片放大
			previewImage(url) {
				uni.previewImage({
					current: url,
					urls: [url],
					loop: true,
				})
			},
			startScan(idx) {
				this.idx = idx
				console.log(this.list[this.idx],"iodx");
				window.android.startQr()
			},
			sendQr(qr) {
				console.log(qr);
				getDataByDeviceCode({
					deviceId:this.list[this.idx].deviceId,
					code:qr
				}).then(res=>{
					this.list[this.idx].inventoryAmount  = res.datas.amount
					this.$forceUpdate()
				})
				// this.list[this.idx].inventoryAmount = qr
			},
			uplaodImg(idx, row) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(JSON.stringify(res.tempFilePaths));
						let that = this;
						this.$refs.helangCompress
							.compress(res.tempFiles[0], that, 1)
							.then((uploadRes) => {
								console.log(idx, "index");
								console.log(uploadRes, "res");
								this.list[idx].fileList = [{
									url: urlConfig.nearbyUrl + uploadRes.datas.file_path,
									urlTwo: uploadRes.datas.file_path
								}]
								console.log(this.list);
							});
					}
				})
			},
			deltet(i, row) {
				if (row.state == 1) return
				// this.list[i].file.splice(idx, 1)
				this.list[i].fileList = []
				this.$forceUpdate()
			},
		}
	}
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.types::before{
		content: '*';
		color: red;
	}
	.page {
		padding-bottom: 160rpx;
	}

	.herder {
		background: #fff;
		padding: 30rpx;
		font-size: 28rpx;

		.span1 {
			color: #9c9c9c;
			margin-right: 10rpx;
		}
	}

	.tabTitle {
		padding-left: 30rpx;
		border-left: 4rpx solid #267DFF;
		margin-left: 30rpx;
		font-size: 28rpx;
		margin-top: 30rpx;
		font-weight: bold;
	}

	.box {
		width: 100%;
		min-height: 500rpx;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;

		.item {
			font-size: 28rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #e1e1e1;
			margin-top: 30rpx;

			&_label {
				width: 150rpx;
				color: #9c9c9c;
			}

			&_value {
				font-weight: 500;
			}
		}

		.item:first-child {
			margin-top: 0;
		}

		.item:last-child {
			border-bottom: none;
			padding-bottom: 0rpx;
		}
	}

	.inputs {
		border: 1rpx solid #e1e1e1;
		border-radius: 6rpx;
		padding: 6rpx 9rpx;
	}

	.btns {
		background-color: #267DFF;
		padding: 10rpx 15rpx;
		height: auto;
		margin-left: 15rpx;
		border-radius: 5rpx;
		color: #FFF;
		font-size: 26rpx;
	}

	.uploadlist {
		display: flex;

		&_item {
			position: relative;
			margin-left: 10rpx;

			&_image {
				height: 150rpx;
				width: 150rpx;
				border-radius: 6rpx;
			}
		}

		&_delet {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			top: 0;
			right: 0;
			z-index: 10;
			background-color: #000000;
		}

		&_add {
			height: 150rpx;
			width: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #E6E6E6;
			border-radius: 6rpx;
		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		background-color: #FFF;
		width: 100%;

		view {
			width: 300rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 8rpx;
		}

		&_left {
			border: 2rpx solid #9c9c9c;
		}

		&_right {
			background-color: #267DFF;
			color: #FFF;
		}
	}
</style>